<script setup lang="ts">
import { ref } from 'vue';
import { getYear } from '@/hooks/useDate';
import { keyList, titleList, businessTypes } from '@/hooks/useCommon';
import { useTableHeight } from '@/hooks/useMethod';
import { formatZeroValue } from '@/hooks/useMethod';
import { getDeptList } from '@/api/budget/budgetDept';
import { DeptVO } from '@/api/budget/budgetDept/types';
import { getList } from '@/api/fill/statistics';
import { StatisticsQueryDTO } from '@/api/fill/statistics/Types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const loading = ref(true);
const showSearch = ref(true);
const { yard_type } = toRefs<any>(proxy?.useDict('yard_type'));

// 使用示例
const tableStyle = useTableHeight(showSearch);

const deptList = ref<DeptVO[]>([]);
/*预算部门列表*/
const getBudgetDeptList = () => {
  getDeptList(queryParams.value.type).then((res) => {
    deptList.value = res.data;
  });
};
const queryFormRef = ref<ElFormInstance>();

// 查询参数
const queryParams = ref<StatisticsQueryDTO>({
  year: getYear(),
  codeList: [],
  type: 1 //1-（默认一下）
});

/*用于存储表格数据*/
const tableList = ref([]);

/*全部列表查询*/
const getListAll = () => {
  getList(queryParams.value)
    .then((res) => {
      tableList.value = res.data;
    })
    .finally(() => {
      loading.value = false;
    });
};

/** 搜索按钮操作 */
const handleQuery = () => {
  getListAll();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.value = {
    year: getYear(),
    codeList: [],
    type: 1
  };
  handleQuery();
};

const downloadName = ref(`业务预算统计表.xlsx`);

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download(
    'statistics/export',
    {
      ...queryParams.value
    },
    downloadName.value
  );
};

/*挂载生命周期钩子*/
onMounted(() => {
  getBudgetDeptList();
  getListAll();
});
</script>

<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="never">
          <el-form ref="queryFormRef" :inline="true">
            <el-form-item label="年份" prop="year">
              <el-date-picker type="year" format="YYYY" value-format="YYYY" v-model="queryParams.year" />
            </el-form-item>
            <el-form-item label="预算部门" prop="codeList" label-width="100px">
              <el-select v-model="queryParams.codeList" placeholder="全部" clearable filterable multiple collapse-tags collapse-tags-tooltip>
                <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptCode" />
              </el-select>
            </el-form-item>
            <el-form-item label="统计类型" prop="type" label-width="100px">
              <el-select
                v-model="queryParams.type"
                @change="
                  (value) => {
                    value === 1 ? (downloadName = '业务预算统计表(下达前).xlsx') : (downloadName = '业务预算统计表(下达后).xlsx');
                  }
                "
              >
                <el-option v-for="dict in businessTypes" :key="dict.key" :label="dict.label" :value="dict.key" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <div>
            <el-button type="warning" plain icon="Download" @click="handleExport"> 导出</el-button>
          </div>
          <div>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getListAll" />
          </div>
        </div>
      </template>
      <div class="table-class">
        <el-table ref="tableRef" :data="tableList" :style="tableStyle" :show-summary="true" append class="custom-table enhanced-table">
          <el-table-column prop="subjectCode" label="预算科目编码" v-if="false" align="center" />
          <el-table-column prop="subjectName" label="预算科目名称" min-width="200" align="center" fixed="left">
            <template #default="scope">
              <el-tooltip effect="dark" placement="top" :content="scope.row.subjectCode">
                <span>{{ scope.row.subjectName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column v-for="item in titleList" :key="item.key" :label="item.label" align="center">
            <el-table-column
              v-for="dict in yard_type"
              :key="dict.value"
              :label="dict.label"
              :prop="dict.value + '_' + item.key"
              align="center"
              show-overflow-tooltip
              min-width="170"
            >
              <template #default="scope">
                {{ formatZeroValue(scope.row[dict.value + '_' + item.key]) }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" v-for="dict in yard_type" :key="dict.value" :label="dict.label + '(合计)'">
            <el-table-column
              v-for="item in keyList"
              :key="item.key"
              :prop="dict.value + '_' + item.key"
              align="center"
              min-width="190"
              :label="item.label"
            >
              <template #default="scope">
                <span v-if="item.key === 'beforeTotal'" style="color: #00bfff">{{ formatZeroValue(scope.row[dict.value + '_' + item.key]) }}</span>
                <span v-else-if="item.key === 'adjustTotal'" style="color: red">{{ formatZeroValue(scope.row[dict.value + '_' + item.key]) }}</span>
                <span v-else-if="item.key === 'afterTotal'" style="color: #00cd00">{{
                  formatZeroValue(scope.row[dict.value + '_' + item.key])
                }}</span>
                <span v-else>{{ formatZeroValue(scope.row[dict.value + '_' + item.key]) }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="总合计" align="center">
            <el-table-column v-for="item in keyList" :key="item.key" :prop="item.key" align="center" min-width="160" :label="item.label">
              <template #default="scope">
                <span v-if="item.key === 'beforeTotal'" style="color: #00bfff">{{ formatZeroValue(scope.row[item.key]) }}</span>
                <span v-else-if="item.key === 'adjustTotal'" style="color: red">{{ formatZeroValue(scope.row[item.key]) }}</span>
                <span v-else-if="item.key === 'afterTotal'" style="color: #00cd00">{{ formatZeroValue(scope.row[item.key]) }}</span>
                <span v-else>{{ formatZeroValue(scope.row[item.key]) }}</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss"></style>
